Build a Simple Platformer Game with HTML Canvas
<!DOCTYPE html>
<html>
<head>
<title>Platformer Game</title>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<canvas id='myCanvas' width='500' height='400'></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
<pre><code> // draw the player
var x = 10;
var y = 10;
var width = 20;
var height = 20;
ctx.fillStyle = '#000000';
ctx.fillRect(x, y, width, height);
// draw the platforms
var platforms = [
{x: 0, y: 350, width: 500, height: 50}, // bottom
{x: 0, y: 200, width: 200, height: 50}, // left
{x: 300, y: 100, width: 200, height: 50} // right
];
for (var i = 0; i < platforms.length; i++) {
ctx.fillStyle = '#000000';
ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnRQ 著作权归作者所有。请勿转载和采集!