Dino Game

This commit is contained in:
Ben
2018-07-16 11:18:23 +01:00
parent 57e091c134
commit 593c1ff51b
14 changed files with 346 additions and 0 deletions

View File

@@ -0,0 +1,39 @@
class Cacti {
constructor() {
this.y = world.ground + 10;
this.x = 900;
this.width = 15;
this.height = 30;
}
update() {
this.x -= player.velocityX;
}
draw() {
ctx.fillStyle="#FFFFFF";
ctx.fillRect(this.x - 2, this.y, this.width + 4, this.height);
ctx.fillStyle="#000000";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
class ThiccCacti {
constructor() {
this.y = world.ground ;
this.x = 900;
this.width = 30;
this.height = 40;
}
update() {
this.x -= player.velocityX;
}
draw() {
ctx.fillStyle="#FFFFFF";
ctx.fillRect(this.x - 2, this.y, this.width + 4, this.height);
ctx.fillStyle="#000000";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}

View File

View File

@@ -0,0 +1,5 @@
function colide() {
for (let i = 0; i < cacti.length; i++) {
}
}

View File

@@ -0,0 +1,38 @@
function spawnEnemys() {
let r = Math.floor(Math.random() * 100);
if (2 > r) {
for (let i = 0; i < cacti.length; i++) {
if (cacti[i].x > 700) {
console.log('Spawn failed')
return;
}
}
if (r == 1) {
cacti.push(new Cacti());
} else {
cacti.push(new ThiccCacti);
}
}
}
function updateEnemys() {
for (let i = 0; i < cacti.length; i++) {
cacti[i].update();
}
}
function despawnEnemys() {
for (let i = 0; i < cacti.length; i++) {
if (cacti[i].x < -cacti[i].width) {
cacti.splice(1, i)
}
}
}
function drawEnemys() {
for (let i = 0; i < cacti.length; i++) {
cacti[i].draw();
}
}

View File

View File

@@ -0,0 +1,68 @@
/*
Author(s): Ben (plane000)#8618
Created: 11/07/2018
Last Updated: 16/07/2018
Last Updated by: Ben (plane000)#8618
*/
let c = document.getElementById("canv");
let ctx = c.getContext("2d");
let player;
let world;
let cacti;
function initialize() {
world = new World();
world.reset();
player = new Player();
player.reset();
cacti = [];
}
function gameLoop() {
cls();
world.update();
spawnEnemys();
despawnEnemys();
updateEnemys();
player.update();
colide();
drawEnemys();
world.draw();
player.draw();
player.velocityX += 0.001;
player.score++;
}
function cls() {
ctx.fillStyle="#FFFFFF" // white
ctx.fillRect(0, 0, 800, 400);
}
window.addEventListener('keydown', (event) => {
if (event.code == 'Space' || event.code == 'ArrowUp' || event.code == 'KeyW') {
console.log('jump');
player.jump();
}
if (event.code == 'ShiftLeft' || event.code == 'ArrowDown' || event.code == 'KeyS') {
console.log('duck');
player.duck();
}
});
window.addEventListener('keyup', (event) => {
if (event.code == 'ShiftLeft' || event.code == 'ArrowDown' || event.code == 'KeyS') {
player.stand();
}
});
initialize();
setInterval(gameLoop, 1000 / 60)

View File

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dino Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<canvas id="canv" width="800" height="400" onkeypress="onKeyPressed(event)"></canvas>
<script src="player.js"></script>
<script src="world.js"></script>
<script src="cacti.js"></script>
<script src="flyer.js"></script>
<script src="enemys.js"></script>
<script src="clouds.js"></script>
<script src="ground.js"></script>
<script src="colision.js"></script>
<script src="game.js"></script>
</body>
</html>

View File

@@ -0,0 +1,11 @@
{
"name": "dino-game",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ben (plane000)",
"license": "MIT"
}

View File

@@ -0,0 +1,71 @@
class Player {
constructor() {
this.x = 50;
this.y = world.ground;
this.width = 20;
this.height = 40;
this.velocityX = 5;
this.velocityY = 0;
this.onGround = true;
this.ground = world.ground;
this.ducking = false;
this.score = 0;
}
jump() {
if (this.onGround) {
this.velocityY = -17;
this.onGround = false;
}
}
duck() {
if (!this.ducking) {
this.ducking = true;
this.height = 20;
this.y += 20;
this.ground += 20;
}
}
stand() {
if (this.ducking) {
this.ducking = false;
this.height = 40;
this.y = world.ground;
this.ground = world.ground;
}
}
update() {
if (!this.onGround) {
this.velocityY += world.gravity;
this.y += this.velocityY;
// console.log(this.y)
if (this.y >= this.ground) {
this.onGround = true;
this.y = this.ground;
// console.log('landed')
return;
}
}
}
draw() {
ctx.fillStyle="#FFFFFF";
ctx.fillRect(this.x - 2, this.y, this.width + 4, this.height);
ctx.fillStyle="#000000";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
reset() {
this.x = 50;
this.y = 300;
this.width = 20;
this.height = 40;
this.velocityX = 5;
this.velocityY = 0;
this.onGround = true;
this.score = 0;
}
}

View File

@@ -0,0 +1,10 @@
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

View File

@@ -0,0 +1,22 @@
class World {
constructor() {
this.gravity = 1;
this.ground = 300;
}
update() {
}
draw() {
ctx.beginPath();
ctx.moveTo(0, this.ground + 40 - 7);
ctx.lineTo(800, this.ground + 40 - 7);
ctx.stroke();
}
reset() {
this.gravity = 1.3;
this.ground = 300;
}
}