弹球小游戏(JavaScript)

最新推荐文章于 2021-05-30 20:29:39 发布

吃货小志

最新推荐文章于 2021-05-30 20:29:39 发布

阅读量1.2k

点赞数

分类专栏： javascript小遊戲文章标签： javascript 游戏 canvas game

本文链接：https://blog.csdn.net/u013525884/article/details/18561899

版权

本文分享了一位新手开发者使用JavaScript和Canvas制作的第一个弹球小游戏的历程。在制作过程中遇到了碰撞回弹、二维数组等问题，虽然代码较为冗长且存在一些小bug，但最终还是完成了游戏的制作。作者反思了在面向对象编程和代码组织上的不足，并表示会在后续项目中改进。

摘要由CSDN通过智能技术生成

先上截圖,

遊戲大概的樣子就是這樣了,

作為一個新新新手,這應該是製作的第一個遊戲吧.

在製作過程, 真是遇到好多好多困難啊,

例如怎麼處理碰撞回彈, 怎麼製作二維陣列...

最初連怎麼讓它動起來都是一個問題!簡直是內牛滿面啊

檢討:

Object Oriented 根本沒做好

全都放在一個html里面用了, 應該可以分開不同.js檔案的.

References都是看完了就算,應該最低限度也要留下鏈接啊.

還是有點小BUG 吐舌头

不過,最後還是做出來啦.

這麼長的代碼根本看都不想想, 下一次我一定會改進的

<!DOCTYPE html>
<html>
<style type="text/css">
#gameCanvas{
	background-color: #000000;
}
</style>
<body>

<canvas id="gameCanvas" width="480" height="600" tabindex="0">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>

function createMatrix(rows, columns)  {
    this.rows = rows;
    this.columns = columns;
    this.myarray = new Array(this.rows);
    for (var i=0; i < this.columns; i +=1) {
        this.myarray[i]=new Array(this.rows)
    }
    return this.myarray;
}

function extend(ChildClass, ParentClass) {
	ChildClass.prototype = new ParentClass();
	ChildClass.prototype.constructor = ChildClass;
}

function Circle(){
	this.radius = 0;
	this.centerX = 0;
	this.centerY = 0;
	this.color = "#FFFFFF";

}
function MainCircle(){
	this.direction = 4;
	this.countHit = 0;
}

extend(MainCircle,Circle);
MainCircle.prototype.handleMotion = function (vx,vy) {
	//direction presentation
	//0 1 2   ↖ ↑ ↗
	//X X X : 
	//3 4 5   ↙ ↓ ↘
	if(this.direction>2){
		this.centerY += vy;
	}else{
		this.centerY -= vy;
	}
	if(this.direction==2 || this.direction==5){
		this.centerX += vx;
	}else if(this.direction==0 || this.direction&