Simple HTML Fruit Catch Game: A Beginner's Guide
<html>
<head>
<title>Fruit Catch Game</title>
<script type="text/javascript">
// Global Variables
var points = 0;
// Create the canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
// Background Image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = 'images/background.jpg';
// Fruit Image
var fruitReady = false;
var fruitImage = new Image();
fruitImage.onload = function () {
fruitReady = true;
};
fruitImage.src = 'images/fruit.png';
// Player Image
var playerReady = false;
var playerImage = new Image();
playerImage.onload = function () {
playerReady = true;
};
playerImage.src = 'images/player.png';
// Game Objects
var player = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var fruit = {
x: 0,
y: 0
};
// Handle keyboard controls
var keysDown = {};
addEventListener('keydown', function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a fruit
var reset = function () {
player.x = canvas.width / 2;
player.y = canvas.height / 2;
// Throw the fruit somewhere on the screen randomly
fruit.x = 32 + (Math.random() * (canvas.width - 64));
fruit.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
player.y -= player.speed * modifier;
}
if (40 in keysDown) { // Player holding down
player.y += player.speed * modifier;
}
if (37 in keysDown) { // Player holding left
player.x -= player.speed * modifier;
}
if (39 in keysDown) { // Player holding right
player.x += player.speed * modifier;
}
// Are they touching?
if (
player.x <= (fruit.x + 32)
&& fruit.x <= (player.x + 32)
&& player.y <= (fruit.y + 32)
&& fruit.y <= (player.y + 32)
) {
++points;
reset();
}
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (playerReady) {
ctx.drawImage(playerImage, player.x, player.y);
}
if (fruitReady) {
ctx.drawImage(fruitImage, fruit.x, fruit.y);
}
// Score
ctx.fillStyle = 'rgb(250, 250, 250)';
ctx.font = '24px Helvetica';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Points: ' + points, 32, 32);
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
</script>
</head>
<body>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmc8 著作权归作者所有。请勿转载和采集!