<html>
<head>
<meta charset="utf-8" />
<title>tank</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#point{
position: absolute;
top:10%;
left:50%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<p id="point">0</p>
</body>
<script>
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d');
let tank_2;
function addVoice(src){
var audio = document.createElement("audio")
audio.src = src;
audio.play();
}
const baseNum = 10;
let point = 0;
const bullets = [];
function resizeCanvas(){
console.log('resize')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener("resize",resizeCanvas,false)
resizeCanvas()
class Rect{
constructor(x, y, w, h, color) {
this.x = x;
this.y = y;
this.w = w* baseNum;
this.h = h* baseNum;
this.color = color;
}
draw() {
// console.log(this.x, this.y)
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.rect(this.x, this.y, this.w, this.h);
ctx.fill();
ctx.stroke();
}
}
class Bullet extends Rect{
constructor(x,y,w,h,color,d){
super(x,y,w,h,color)
this.direction = d
this.show = true
}
draw(){
if(this.show)
super.draw()
}
move(){
if(!this.show)return
switch (this.direction) {
case 0:
this.x -= this.w
break
case 1:
this.y -= this.h
break
case 2:
this.x += this.w
break
case 3:
this.y += this.h
break
}
if (this.x >= canvas.width || this.x < 0 ||
this.y >= canvas.height || this.y < 0) {
this.show = false
}
}
}
class Tank{
constructor(x, y, w, h, img){
this.x = x * baseNum;
this.y = y * baseNum;
this.w = w * baseNum;
this.h = h * baseNum;
this.img = img;
this.direction = 0 // 0 left 1 up 2 right 3 left
}
}
function newImage(src) {
var img = new Image();
img.src = src;
return img;
}
const direction = ['l', 'u', 'r', 'd'];
const tankList = [];
for(let i = 0; i < 4; i++){
tankList.push(newImage('./tank'+direction[i]+'.png'))
};
class Player extends Tank{
draw(isLoad=false){
if(isLoad){
ctx.drawImage(this.img[this.direction],
this.x, this.y, this.w, this.h)
}else{
this.img[this.direction].onload = () => {
ctx.drawImage(this.img[this.direction],
this.x, this.y, this.w, this.h)
}
}
}
move(direction){
// ctx.clearRect(0, 0, canvas.width, canvas.height);
switch(direction){
case 0:
this.x -= this.w
break;
case 1:
this.y -= this.h
break;
case 2:
this.x += this.w
break;
case 3:
this.y += this.h
break;
}
if(this.x >= canvas.width || this.x < 0 ||
this.y >= canvas.height || this.y < 0){
switch(direction){
case 0:
this.x += this.w
break
case 1:
this.y += this.h
break
case 2:
this.x -= this.w
break
case 3:
this.y -= this.w
break
}
return
}
this.direction = direction
}
}
const enemy = newImage('./enemy.png')
const enemies = []
class Enemy extends Tank{
draw(isLoad=false){
if(isLoad){
ctx.drawImage(this.img,
this.x, this.y, this.w, this.h)
}else{
this.img.onload = () => {
ctx.drawImage(this.img,
this.x, this.y, this.w, this.h)
}
}
}
}
const tank_1 = new Player(0,0,5,5,tankList)
tank_1.draw()
document.onkeydown = function (e) {
switch (e.keyCode) {
case 37: //left
tank_1.move(0)
break;
case 38: //up
tank_1.move(1)
break;
case 39: //right
tank_1.move(2)
break;
case 40: //down
tank_1.move(3)
break;
case 32:
addVoice('./Fire.wav')
const bullet = new Bullet(tank_1.x,tank_1.y,5,5,'black',
tank_1.direction)
bullets.push(bullet)
break;
}
tank_1.draw(true)
e.preventDefault();
// ctx.clearRect(0, 0, canvas.width, canvas.height);
}
var timer = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
tank_1.draw(true)
for(const b of bullets){
b.move()
b.draw()
}
for(const e of enemies){
e.draw(true)
}
const random_enemy = getRandomEnemy()
if(random_enemy){
enemies.push(random_enemy)
}
}, 100);
function randomBetween(min, max) {
return Math.round(min + Math.random() * (max - min))
}
function getRandomEnemy(){
if(enemies.length > 10) return null
let isOnTank = true;
while(isOnTank){
isOnTank = false
let enemyX = randomBetween(0, canvas.width / baseNum - 1);
let enemyY = randomBetween(0, canvas.height / baseNum - 1);
tank_2 = new Enemy(enemyX,enemyY,5, 5,enemy)
if (tank_2.x == tank_1.x && tank_2.y == tank_1.y) {
isOnTank = true
}
}
return tank_2
}
</script>
</html>
