FROGGER ARCADE JAVASCRIPT
fixed logs error All rights reserved to Frogger.
FROGGER UNDER100linesGREATV2.html
<!DOCTYPE html>
<html lang="en">
<body>
<HEADER>
<P>FROGGER</P>
</HEADER>
<meta charset="utf-8" />
<SECTION style="border-style: solid; border-width: 2px; width: 512px;">
<CANVAS WIDTH="512" HEIGHT="512" ID="canvas" tabindex="0">
Your browser does not support canvas!!
</CANVAS>
</SECTION>
<script>
var d=0,qp=1;
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 39:
QX+=16//right
break;
case 38:
QY-=16//up
qp=-qp;
d=qp;
break;
case 37:
QX-=16//left
break;
case 40:
QY+=16//down
qp=-qp;
d=qp;
break;
default:
}
if (QY>120){
d=0;}}, true);
var CPRESSRATIO=7//RANGE 3-26 from 128 or 4
var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var imageData =ctx.getImageData(0, 256, 256,512);
var fps = 28;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);
var TRIAL = new Image(); // Create new img element
TRIAL.src="data:image/png;base64,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"
QX=128;
QY=224;
var coldQ=224;
ctx.fillStyle="#00FF00";
function draw() {
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
coldQ++;
coldQ=coldQ&255;
var UU= (canvasWidth*canvasHeight/2)
var hit=0;
for (var i = 0; i < UU; ++i) {
var EE=imageData.data[4*i+2]+imageData.data[4*i+1]+imageData.data[4*i];
if(i&64) {
hit=(hit+1)&2047;}
if (hit===0){
coldQ=-coldQ+512;
hit=0;}
var w=256;
var EST=!((i<48*w)||((i>128*w)&&(i<144*w))||(i>224*w))
data[i+(coldQ*EST)] =(255<<24)|imageData.data[4*i+2]<<16|imageData.data[4*i+1]<<8|imageData.data[4*i];;
if((i+(coldQ*EST))==(((QY+8)<<8)+QX+7)){
if ((QY<128)&&(EE== 74)){
d=0;
QX=128;
QY=128;}
if ((QY>128)&&(EST)&&(EE>12)){
QX=128;
QY=224;}}
if (QY<48){
alert("You Win!")
QX=128;
d=0;
QY=224;}}
imageData.data.set(buf8);
ctx.putImageData(imageData, 0, 0);
ctx.fillRect(QX-=d,QY,16,16);
ctx.drawImage(TRIAL, 0,0,256,256,0,256,256,256);
imageData = ctx.getImageData(0, 256, 256,512);}
requestAnimationFrame(draw);}
draw();
</script>
<style>
</style>
</body>
</html>
@Infinity8378 - if you setup a GameDev Project you can upload your HTML version and it will be playable through there.
Once you do that I can also give you your challenge award.
