Příspěvekod izzy1995 » 06 dub 2015 14:57
no nejak som si s daným problémom poradil, teraz riešim vykreslenie tehličiek...čo mám spraviť? ešte stále niektoré veci nefungujú...tak isto ako zmena pozície lopty po páde mimo a odrátavanie životov
a ešte debugger hlási:
Uncaught TypeError: object is not a function
Uncaught ReferenceError: ClearInterval is not defined
čo sa týka onClick-u, chcel som pomocou toho spúšťať loptu po štarte a po resete pozície
tu je komplet celý kód:
Kód: Vybrat vše
<html>
<head>
<title>Breakout</title>
<script>
var canvas
var ctx
var text
var frame = 0
var intervalId = 0
var mouse = {x: 340}
var balls = 3
intervalId = setInterval(draw,33);
var ball = {
x: 400,
y: 375,
dx: 10,
dy: 5,
move: function() {
if (this.x >= canvas.width || this.x <= 0)
{ this.dx *= -1 };
if (this.y >= canvas.height || this.y <= 0 )
{ this.dy *= -1 };
if (ball.y > 375) {
if (ball.x > bumper.x && ball.x < bumper.x + 150)
ball.dy *= -1;
else {
balls--;
ClearInterval(intervalId);
if (ClearInterval = true){
window.setTimeout(draw,5000);
intervalId = setInterval(draw,33);
}
if (balls = 0)
text.innerHTML = "GAME OVER!";
}
}
this.x = this.x - this.dx;
this.y = this.y - this.dy;
}
}
function drawBall() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2);
ctx.closePath();
ctx.fill();
}
var bumper = {
x: 325,
y: 375,
move: function() {
bumper.x = mouse.x - 75;}
}
function drawBumper(){
ctx.beginPath();
ctx.rect(bumper.x, 375, 150, 385);
ctx.fillStyle = 'blue';
ctx.fill();
}
function bricks(){
rows: 5;
cols: 20;
width: 40;
height: 15;
padding: 1;
bricks = new Array (this.rows);
for (i=0;i<= this.rows;i++){
bricks[i] = new Array(this.cols);
for (j=0; j < this.cols; j++) {
bricks[i][j] = 1;
}
}
for (i=0; i < this.rows; i++) {
for (j=0; j < this.cols; j++) {
if (bricks[i][j] == 1) {
rect((j * (this.width + this.padding)) + this.padding,
(i * (this.height + this.padding)) + this.padding,
this.width, this.height);
}
}
}
}
function setText() {
text.innerHTML = "Balls: " + balls;
}
function draw() {
frame++;
ball.move();
drawBall();
bumper.move();
drawBumper();
bricks();
setText();
}
function click(event){
var x = event.pageX
var y = event.PageY
}
window.onload = function() {
text = document.getElementById("text");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
}
window.onmousemove = function(event) {
mouse.x = event.x
mouse.y = event.y
}
</script>
<style>
#canvas {
border-style: solid;
//margin-left: 30%;
color : black;
border-width: 1px;
cursor: none;
}
#text{
font-size:24px;
font-style:bold;
}
</style>
</head>
<body>
<p>
<canvas id="canvas" width="800" height="400" ></canvas>
<p id="text"></p>
</p>
</body>
</html>ten zakomentovaný kód tam je na skúšku
--- Doplnění předchozího příspěvku (06 Dub 2015 23:05) ---
takže niečo som spravil, no teraz mám zas iný problém...ako mám spraviť, aby sa hra znovu spustila v stave ako na začiatku s tým, že odčíta tú loptu? momentálne to mám tak, že ju odčíta a spustí sa clearInterval
kolízie s tehličkami nejak doriešim
Kód: Vybrat vše
<html>
<head>
<title>Breakout</title>
<script>
var canvas;
var ctx;
var text;
var frame = 0;
var intervalId = 0;
var mouse = {x: 340};
var balls = 3;
var xbricks;
var rows = 5;
var cols = 9;
var width = 88;
var height = 15;
var padding = 1;
intervalId = setInterval(draw,33);
var ball = {
x: 400,
y: 375,
dx: 10,
dy: 5,
move: function() {
if (this.x >= canvas.width || this.x <= 0)
{ this.dx *= -1 };
if (this.y >= canvas.height || this.y <= 0 )
{ this.dy *= -1 };
if (ball.y > 375) {
if (ball.x > bumper.x && ball.x < bumper.x + 150)
ball.dy *= -1;
else {
balls--;
clearInterval(intervalId);
if (balls <= 0)
text.innerHTML = "GAME OVER!";
}
}
this.x = this.x - this.dx;
this.y = this.y - this.dy;
}
}
function drawBall() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
var bumper = {
x: 325,
y: 375,
move: function() {
bumper.x = mouse.x - 75;
}
}
function drawBumper(){
ctx.beginPath();
ctx.rect(bumper.x, 375, 150, 385);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();
}
function bricks(){
xbricks = new Array(rows);
for (var i=0; i<= rows; i++){
xbricks[i] = new Array(cols);
for (var j=0; j <= cols; j++) {
xbricks[i][j] = 1;
}
}
}
function drawBricks(){
var rowcolors = ["red", "green", "yellow", "purple", "black"];
for (var i=0; i < rows; i++) {
ctx.fillStyle = rowcolors[i];
for (var j=0; j < cols; j++) {
if (xbricks[i][j] == 1) {
ctx.beginPath();
ctx.rect((j * (width + padding)) + padding,
(i * (height + padding)) + padding,
width, height);
ctx.closePath();
ctx.fill();
}
}
}
}
function setText() {
text.innerHTML = "Balls: " + balls;
}
function draw() {
frame++;
ball.move();
drawBall();
bumper.move();
drawBumper();
bricks();
drawBricks();
setText();
}
function click(event){
var x = event.pageX;
var y = event.pageY;
}
window.onload = function() {
text = document.getElementById("text");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
}
window.onmousemove = function(event) {
mouse.x = event.x
mouse.y = event.y
}
</script>
<style>
#canvas {
border-style: solid;
//margin-left: 30%;
color : black;
border-width: 1px;
cursor: none;
}
#text{
font-size:24px;
font-style:bold;
}
</style>
</head>
<body>
<p>
<canvas id="canvas" width="800" height="400" ></canvas>
<p id="text"></p>
</p>
</body>
</html>
Intel Core i7-4710HQ 3,5Ghz, Intel HM86 Chipset, 8GB DDR3 1600Mhz, SATA HDD 1TB(7200rpm) + 2TB samsung HDD,IPS LED 15,6" 1920x1080px,Intel Graphics 4600, Nvidia GeForce GTX860M 4GB GDDR5,Wi-fi 802.11 a/g/n, Bluetooth
ASUS N551JM-DM157H
Born to be FIIT (STU)
