Programming 101

Introduction to Canvas

https://itnext.io/tutorial-the-simplest-canvas-game-in-100-lines-5-min-6bfb577403dd

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

Phaser 3 Framework:
http://labs.phaser.io/ (A game framework for canvas mobile browser)

http://phaser.io/examples/v2/box2d/car-on-terrain

http://gamecodeschool.com/

W3Schools Intro to Canvas

https://www.w3schools.com/graphics/game_intro.asp

https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity

game.js

function game() {

	var app = document.getElementById("app");
	var screen = app.getContext("2d"); //standard canvas method

    alert("Game is loaded");
	
	var degrees_icon;
	degrees_icon = document.getElementById("degrees-90");
	screen.drawImage(degrees_icon, 50, 10);


	screen.moveTo(0,0);

    alert("goodgame");
	var nextX = 100;
	var nextY = 100;

	screen.lineTo(nextX,nextY);
	screen.stroke(); 


	screen.font = "20px Arial";
	screen.fillText("Hello World",10,50);

}

player.js

index.html

<html>
<head>
	<title></title>
</head>
<body onload="game()">
	<canvas id="app"></canvas>
	<img id="degrees-90" src="degrees-90.png"></img>
	<!--img id="degrees-45" src="degrees-45.png"></img>
	<img id="degrees-360" src="degrees-360.png"></img-->
	<script src="player.js"></script>
	<script src="game.js"></script>
</body>
</html>

Jump to: